<template>
	<view>
		<cu-custom bgColor="bg-red" :isBack="true">		<block slot="backText">返回</block>
			<block slot="content">卡片管理</block>
		</cu-custom>
		<view v-for="(item,index) in list" :key="index" class="white-box">
			<view class="name-phone white-padding" >
				<view class="name">{{item.realname}}</view>
				<view class="phone">{{item.mobile}}</view>
			</view>
			<view class="address white-padding" >{{item.account_number}}
				<text v-if="item.sign_contract != 'null' && item.sign_contract != null && item.sign_contract != ''" style="color: red;margin-left: 10rpx;">已签约</text>
				<text  v-if="item.sign_contract != 'null' && item.sign_contract != null && item.sign_contract != ''" style="float: right;" @tap="close_contract(item)">我要解签</text>
			</view>
			<view class="operation ">
				<view class="choose" @tap="selectAddress(item)">
					<!-- #ifndef MP-ALIPAY -->
					<radio :data-id="item.id" color="#FBB240" :checked="item.is_default==1?true:false"></radio>
					<!-- #endif -->
					<text :data-id="item.id" :checked="item.is_default == 1 ? true:false">默认</text>
					
				</view>
				<image :src="CLOUDPATH+'/icon-alter.png'" ></image>
				<text class="otext" @tap="editAddress(item)">编辑</text>

				<image :src="CLOUDPATH+'/icon-delete.png'" @tap="deleteAddress" :data-id="item.id"></image>
				<text class="otext" @tap="deleteAddress" :data-id="item.id">删除</text>
			</view>
		</view>
		<view style="width: 80%;text-align: center;margin: 0 auto;margin-top: 20px;color: red;">支付时系统自动选择默认的银行卡，如没有选择默认则会自动选择最新增加的银行卡进行支付</view>
		<view class="" style="height: 200rpx; width: 100%;"></view>
		<view class="cu-bar foot padding">
			<view @click="addAddress()" class="cu-btn round lg w100" :class="'bg-'+theme">添加/签约卡片</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				list: [],
				hasMore: true,
				loading: false,
				radio: "D",
				address_id: 0,
				selected_id: 0,
				CLOUDPATH: this.$config.cloudPath,
				theme: this.$config.THEME(),
				modalName: ''
			}
		},
		onLoad() {
			if (this.$common.loginAuth(true)) {}
		},
		onShow() {

			if (this.$common.loginAuth(true)) {
				this.page = 1
				this.hasMore = true
				this.loading = false
				this.getList()
			}
		},
		methods: {
			getList() {
				if (!this.loading && this.hasMore) {
					this.$http
						.get('card_list', {
							page: this.page
						})
						.then((response) => {
							let list = response.data.data
							
							this.list = list
							this.page++
							this.loading = false
							uni.stopPullDownRefresh()
						})
						.catch((response) => {
							console.log(response)
							uni.stopPullDownRefresh()
						})
				} else
					uni.stopPullDownRefresh()
			},
			deleteAddress(e) {
				let _this = this
				let id = e.currentTarget.dataset.id
				let list = _this.list
				uni.showModal({
					title: '温馨提示',
					content: '是否确定要删除该卡片',
					success(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '加载中...'
							})
							_this.$http
								.post('card_delete', {id:id}, )
								.then((response) => {
									console.log(response)
									_this.$common.showSuccess(response.data.message)
									_this.page = 1
									_this.hasMore = true
									_this.loading = false
									_this.getList()
								})
								.catch((response) => {
									console.log(response)
								})
						}
					}
				})
			},
			selectAddress(card) {
				card.is_default = 1;
				this.$http
					.post('card_save', card)
					.then((response) => {
						uni.hideLoading()
						uni.navigateBack({
							
						})
					})
				.catch((response) => {
					uni.hideLoading()
				})
			},
			close_contract(item){
				uni.hideLoading()
				let _this = this;
				uni.showModal({
					    title: '友情提示',
					    content: '是否确定解约该银行卡，解约之后无法进行支付',
					    success: function (res) {
					        if (res.confirm) {
					            _this.$http
					            	.post('card_close_contract', item)
					            	.then((response) => {
										if (response.data.data.status == 200) {
											
											_this.$common.showSuccess('成功解除签约')
											_this.page = 1
											_this.hasMore = true
											_this.loading = false
											_this.getList()
										} else {
											_this.$common.showError('解除签约失败')
										}
					            		uni.hideLoading()
					            	})
					            .catch((response) => {
					            	uni.hideLoading()
					            })
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
			},
			addAddress() {
				uni.navigateTo({
					url: "/pages/member/card/edit"
				})
			},
			editAddress(item) {
				uni.navigateTo({
					url: "/pages/member/card/edit?id=" + item.id
				})
			},
		},
		onPullDownRefresh() {
			this.page = 1
			this.hasMore = true
			this.loading = false
			this.getList()
		},
	}
</script>

<style>
	.white-box {
		width: 678rpx;
		margin: 25rpx 36rpx 0;
		padding: 20rpx 0;
		border-radius: 5rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.white-box .white-padding {
		width: 606rpx;
	}

	.white-box .name-phone {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		line-height: 55rpx;
	}

	.name-phone .name {
		font-size: 32rpx;
	}

	.name-phone .phone {
		font-size: 28rpx;
	}

	.white-box .address {
		font-size: 24rpx;
		font-weight: bold;
		color: rgba(153, 153, 153, 1);
		margin-top: 20rpx;
	}

	.white-box .operation {
		border-top: 1rpx solid #EEEEEE;
		margin-top: 40rpx;
		padding: 20rpx 36rpx 0;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 26rpx;
		font-weight: bold;
		color: rgba(153, 153, 153, 1);
	}

	.operation .choose {
		flex: 1;
		line-height: 52rpx;
	}

	.choose radio {
		margin-right: 33rpx;
	}

	.operation image {
		width: 30rpx;
		height: 30rpx;
		margin: 0 15rpx 0 50rpx;
	}

	button {
		width: 618rpx;
		margin: 258rpx 66rpx 50rpx;
	}
</style>
